import React from 'react';
import WeUI from 'react-weui';

const {
    Page,
    Panel,
    PanelHeader,
    PanelBody,
    MediaBox,
    MediaBoxTitle,
    MediaBoxDescription,
    Button,
    ButtonArea,
    Dialog,
    Toast
} = WeUI;

export default class BDAddress extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            showToast: false,
            showConfirm: false,
            Confirm: {
                title: '确认删除',
                buttons: [
                    {
                        type: 'default',
                        label: '取消',
                        onClick: this.hideDialog.bind(this)
                    },
                    {
                        type: 'primary',
                        label: '确认',
                        onClick: this.operate.bind(this)
                    }
                ]
            }
        }
    }
    operate(){
        console.log("删除地址");

        this.hideDialog();
        //Todo 操作成功
        this.setState(
            {showToast: true}
        )
        this.state.toastTimer = setTimeout(()=>{
            this.setState({showToast: false})
        }, 800)
    }

    hideDialog(){
        this.setState({
            showConfirm: false
        });
    }

    clickHandle(url){
        this.props.history.push(url);
    }

    render(){
        return (
            <Page transition={true}>
                <Panel>
                    <PanelHeader>
                        地址
                    </PanelHeader>

                    <PanelBody>
                        <MediaBox type="text">
                            <MediaBoxTitle>南哥</MediaBoxTitle>
                            <MediaBoxDescription>
                                香港九龙
                            </MediaBoxDescription>
                        </MediaBox>
                        <MediaBox type="text">
                            <MediaBoxTitle>山鸡</MediaBoxTitle>
                            <MediaBoxDescription>
                                猪笼城寨
                            </MediaBoxDescription>
                        </MediaBox>
                    </PanelBody>
                </Panel>

                <ButtonArea>
                    <Button onClick={this.clickHandle.bind(this, "/addressedit")}>新增地址</Button>
                </ButtonArea>
                <ButtonArea>
                    <Button type="warn" onClick={ e => this.setState({showConfirm: true})}>删除地址</Button>
                </ButtonArea>
                <Dialog type="ios" title={this.state.Confirm.title} buttons={this.state.Confirm.buttons} show={this.state.showConfirm}>
                    确认要删除此地址吗？
                </Dialog>
                <Toast icon="success-no-circle" show={this.state.showToast}>操作成功</Toast>
            </Page>
        )
    }
}